<template>
  <BasicDrawer @register="register" v-bind="$attrs" :isDetail="true" @open-change="open_change"
    :title="record?.typeName">
    <div v-if="show" class="py-8 bg-white flex flex-col justify-center items-center">
      <BasicForm @register="registerForm" />
      <div class="flex justify-center">
        <a-button @click="closeDrawer" size="large"> 取消 </a-button>
        <a-button size="large" class="!ml-4" type="primary" @click="handleSubmit"> 确认 </a-button>
      </div>
    </div>

  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicForm, useForm } from '/@/components/Form/index';
// import { formSchema } from './NurseGoodsdDetail/NurseGoodsDetail.data';
import { saveOrUpdate, queryById, queryCostType } from './NurseGoodsdDetail/NurseGoodsDetail.api';

const record = ref()

const setBill = async (costType: String) => {
  const result = await queryCostType({ id: costType || "" })
  if (result) {
    await setFieldsValue({
      billCode: result.billCode,
      billName: result.billName,
      costTypeName: result.name
    })
  }
}

const formSchema: any = [
  {
    label: '商品名称',
    field: 'goodsName',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {

      return [
        { required: true, message: '请输入商品名称!' },
      ];
    },
  },
  {
    label: '技术服务费',

    field: 'price',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入技术服务费!' },
      ];
    },
  },
  {
    label: '预付款',
    field: 'preAmt',
    component: 'InputNumber',
  },
  {
    label: '费用类型',
    field: 'costType',
    // component: 'Input',
    component: 'JDictSelectTag',
    dynamicRules: ({ model, schema }) => {
      setBill(model?.costType)
      return [
        { required: true, message: '请输入费用类型!' },
      ];
    },
    componentProps: {
      dictCode: "nurse_cost_type,name,code"
    },
  },
  {
    label: '费用类型名称',
    field: 'costTypeName',
    component: 'Input',
    componentProps: { disabled: true },
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入费用类型名称!' },
      ];
    },
  },
  {
    label: '商品标题图片',
    field: 'pic',
    component: 'JImageUpload',
    componentProps: {
      fileMax: 10
    },
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入商品标题图片!' },
      ];
    },
  },
  {
    label: '服务介绍',
    field: 'description',
    component: 'JEditor',
  },
  {
    label: '服务详情',
    field: 'descriptionPic',
    component: 'JEditor',
    // component: 'JImageUpload',
    // componentProps: {
    //   fileMax: 10
    // },
    // dynamicRules: ({ model, schema }) => {
    //   return [
    //     { required: true, message: '请输入服务详情!' },
    //   ];
    // },
  },

  {
    label: '服务时长',
    field: 'duration',
    component: 'InputNumber',
  },

    {
      label: '服务时长单位',
      field: 'serviceUnit',
      component: 'JDictSelectTag',
      componentProps: {
        //渲染的组件的props
        dictCode: 'service_unit',
        placeholder: '请选择服务时长单位',
      },
    },

  {
    label: '产品规格',
    field: 'standardCode',
    component: 'Input',
  },
  {
    label: '商品ID',
    field: 'goodsId',
    component: 'Input',
    componentProps: { disabled: true },
    // dynamicRules: ({ model, schema }) => {
    //   return [
    //     { required: true, message: '请输入商品ID!' },
    //   ];
    // },
  },
  {
    label: '开票代码',
    field: 'billCode',
    component: 'Input',
    componentProps: { disabled: true },
    // dynamicRules: ({ model, schema }) => {
    //   return [
    //     { required: true, message: '请输入开票代码!' },
    //   ];
    // },
  },
  {
    label: '开票名称',
    field: 'billName',
    component: 'Input',
    componentProps: { disabled: true },
    // dynamicRules: ({ model, schema }) => {
    //   return [
    //     { required: true, message: '请输入开票名称!' },
    //   ];
    // },
  },
  // TODO 主键隐藏字段，目前写死为ID
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false
  },
];

const [register, { closeDrawer }] = useDrawerInner(async (data) => {

  record.value = data?.record
  const result = await queryById({ id: data.record?.id })

  await setFieldsValue({
    ...result,
    serviceUnit: result?.serviceUnit !== undefined && result?.serviceUnit !== null
      ? String(result.serviceUnit)
      : result?.serviceUnit,
  })
});

const show = ref(false)

const open_change = (visible) => {
  show.value = visible
}
// Emits声明
const emit = defineEmits(['register', 'success']);

//表单配置
const [registerForm, { setFieldsValue, validate, }] = useForm({
  //labelWidth: 150,
  schemas: formSchema,
  showActionButtonGroup: false,
  baseColProps: { span: 24 }
});
async function handleSubmit() {

  try {

    const values = await validate();


    if (!values) return

    await saveOrUpdate(values, true);

    closeDrawer()

  } catch (error) { }
}

</script>
